import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 每当初始化项目是 就先把localStorage取一下数据
   const car =window.JSON.parse(localStorage.getItem('cart')||"[]")
const store=new Vuex.Store({
    state:{
        // 在cart中 把每个商品 存储为一个对象  {id，count, selected,price}
        cart:car  //购物车的数组
    },
    mutations:{
        addToCart(state,goods){
            // 将商品添加到购物车
            // state.cart.push(goods)
            let flag=false
            state.cart.some(item=>{
                if(item.id==goods.id){
                    // 如果找到了对应的商品 则更新数量
                    falg=true
                    item.count+=goods.count
                    // 终止后续循环
                    return true 
                }
            })
            // 如果没有找到 直接push到购物车
            if(!falg){
                state.cart.push(goods)
            }
            // 为了持久化存储购物车 的数据 可以把购物车商品 序列化出来 存储到localStorage中
            localStorage.setItem('cart',window.JSON.stringify(state.cart))
        },
        updateGoodsCount(state,goods){
            // 根据传递过来的商品信息，更新购物车种商品的数量
            state.cart.some(item=>{
                if(item.id==goods.id){
                    item.count=goods.count
                    return true
                }
            })
             // 为了持久化存储购物车 的数据 可以把购物车商品 序列化出来 存储到localStorage中
             localStorage.setItem('cart',window.JSON.stringify(state.cart))
        },
        delForemCart(state,id){
            // 根据id删除vuex中对应的商品
            state.cart.some((item,i)=>{
                if(item.id==id){
                    state.cart.splice(i,1)
                    return true
                }
            })
             // 为了持久化存储购物车 的数据 可以把购物车商品 序列化出来 存储到localStorage中
             localStorage.setItem('cart',window.JSON.stringify(state.cart))
        },
        changeSelectState(state,obj){
            // 根据提供的obj对象的 id和 selected属性，更改购物车中商品的选中状态
            state.cart.some(item=>{
                if(item.id==obj.id){
                    item.selected=obj.selected
                    return true
                }
            })
            // 为了持久化存储购物车 的数据 可以把购物车商品 序列化出来 存储到localStorage中
            localStorage.setItem('cart',window.JSON.stringify(state.cart))
        }
    },
    getters:{
        totalCount(state){
            // 徽标中商品数量
            let c=0
            // getters特性 只要依赖的数据变化了 必然会计算这个getters的值
            state.cart.forEach(item=>c+=item.count)
            return c
             },
        idStr(state){
            // 获取购物车中所有商品的id字符串
            let arr=[]
            state.cart.forEach(item=>arr.push(item.id))
            return arr.join(",")
             },
        countObj(state){
            // 获取购物车中 商品的id和商品的数量的键值对对应关系 
            // o[item.id] 的中括号是o的属性不是数组   {88:3,89:5}
            let o={}
            state.cart.forEach(item=> o[item.id]=item.count)
            return o
            },
        selectedObj(state){
            let  c={}
            state.cart.forEach(item=>o[item.id]=item.selected)
            return c
        },
        selectedCount(state){
            // 勾选商品数量
            let d=0
            state.cart.forEach(item=>{
                // 商品被选中了才添加
                if(item.selected){
                    d+=item.count
                }
            })
            return d
        },
        amount(state){
            // 总价
            let c=0
            state.cart.forEach(item=>{
                // 商品被选中了才添加
                if(item.selected){
                    c+=item.count*item.price
                }
            })
            return c

        }

        }
}) 
export default store